/* 成绩录入页面思路分析
1.页面一加载,发送ajax请求学员信息列表
2.点击分数td,给当前td动态添加一个input输入框
    * (1)td标签是动态新增的元素,需要注册委托事件
    * (2)学员id和姓名不能修改，只有分数才可以修改
    * (3)输入框默认显示当前点击的td的文本
3.输入框按enter键 : (1)获取输入框文本 (2)发送ajax请求  (3)移除输入框
*/

// 1.页面一加载,发送ajax请求学员信息列表
// ajax发送get请求
function initData() {
  axios({
    method: 'get',
    url: '/score/list',
  }).then(res => {
    // 响应请求
    console.log(res)
    // 渲染列表
    // 以前都是渲染数组包对象 这次是全是对象 需要用新方法
    document.querySelector('tbody').innerHTML = Object.keys(res.data.data).map(item => `
    <tr>
      <th scope="row">${item}</th>
      <td>${res.data.data[item].name}</td>
      <td class="score" data-stu_id="${item}" data-batch="1">${res.data.data[item].score[0]}</td>
      <td class="score" data-stu_id="${item}" data-batch="2">${res.data.data[item].score[1]}</td>
      <td class="score" data-stu_id="${item}" data-batch="3">${res.data.data[item].score[2]}</td>
      <td class="score" data-stu_id="${item}" data-batch="4">${res.data.data[item].score[3]}</td>
      <td class="score" data-stu_id="${item}" data-batch="5">${res.data.data[item].score[4]}</td>
    </tr>
    `).join('')
  })
}

// 调用渲染列表函数
initData()

/* 
2.点击分数td,给当前td动态添加一个input输入框
    * (1)td标签是动态新增的元素,需要注册委托事件
    * (2)学员id和姓名不能修改，只有分数才可以修改
    * (3)输入框默认显示当前点击的td的文本
*/
document.querySelector('tbody').addEventListener('click', function (e) {
  // 点击的成绩单元格
  if (e.target.classList.contains('score')) {
    // td标签是动态新增的元素,需要注册委托事件
    const input = document.createElement('input')
    // 添加类名inp
    input.className = 'inp'
    // 输入框默认显示当前点击的td的文本
    input.value = e.target.innerHTML
    e.target.appendChild(input)
    // input.focus() 输入框自动聚焦
    input.select() // 输入框自动聚焦 + 自动选中文本

    // 输入框失去焦点移除输入框
    input.addEventListener('blur', function () {
      // e.target.removeChild(input)
      this.remove()
    })

    /* 
    需求问题:在键盘事件中 需要通过td来获取学生id和第几次成绩
    发现问题:在键盘事件中 e.target不是指向td 而是指向键盘事件
    解决问题:在函数外面声明一个变量存储td
    */
    // 将外部函数的e.target存储起来方便在内部函数使用
    const td = e.target

    // 输入框enter键发送ajax请求新列表
    input.addEventListener('keyup', function (e) {
      if (e.key === 'Enter') {
        // 收集数据
        const stu_id = td.dataset.stu_id
        const batch = td.dataset.batch
        const score = input.value
        console.log(stu_id, batch, score)
        // ajax发送post请求
        axios({
          method: 'post',
          url: '/score/entry',
          data: { stu_id, batch, score }
        }).then(res => {
          // 响应请求
          console.log(res)
          if (res.data.code === 0) {
            Toast.success(res.data.message)
            // 调用渲染函数
            initData()
          }
        }).catch(err => {
          console.log(err)
          // 提示错误
          Toast.fail(err.response.data.message)
          // 刷新列表
          initData()
        })
      }
    })
  }
})